React Server Actions: Serveripoolne vormitöötlus lihtsustatud

React Server Actions, mis võeti kasutusele React 18-s ja mida on Next.js-is oluliselt täiustatud, pakuvad revolutsioonilist lähenemisviisi vormide esitamise ja andmete muutmise käsitlemiseks otse serveris. See võimas funktsioon lihtsustab arendusprotsessi, suurendab turvalisust ja parandab jõudlust võrreldes traditsioonilise kliendipoolse andmete toomise ja manipuleerimisega.

Mis on React Server Actions?

Server Actions on asünkroonsed funktsioonid, mis töötavad serveris ja mida saab käivitada otse Reacti komponentidest. Need võimaldavad teil teha serveripoolseid toiminguid, näiteks:

• Vormide esitamine: Töötle vormiandmeid turvaliselt serveris.
• Andmete muutmine: Uuenda andmebaase või väliseid API-sid.
• Autentimine: Halda kasutajate sisselogimisi ja registreerimist.
• Serveripoolne loogika: Käivita keerukat äriloogikat, ilma et see oleks kliendile nähtav.

Server Actions'i peamine eelis on see, et need võimaldavad teil kirjutada serveripoolset koodi oma Reacti komponentides, kõrvaldades vajaduse eraldi API marsruutide ja keeruka kliendipoolse andmete toomise loogika järele. See UI ja serveripoolse loogika koos paiknemine viib hallatavama ja tõhusama koodibaasini.

React Server Actions'i kasutamise eelised

React Server Actions'i kasutamine pakub mitmeid olulisi eeliseid:

Lihtsustatud arendus

Server Actions vähendavad boilerplaadi koodi, võimaldades teil käsitleda vormide esitamisi ja andmete muutmisi otse oma Reacti komponentides. See kõrvaldab vajaduse eraldi API lõpp-punktide ja keeruka kliendipoolse andmete toomise loogika järele, muutes arendusprotsessi sujuvamaks ja muutes teie koodi lihtsamini mõistetavaks ja hooldatavaks. Mõelge lihtsale kontaktivormile. Ilma Server Actions'ita vajaksite eraldi API marsruuti vormi esitamise käsitlemiseks, kliendipoolset JavaScripti andmete saatmiseks ja veakäsitlusloogikat nii kliendis kui ka serveris. Server Actions'iga saab seda kõike käsitleda komponendi sees.

Suurem turvalisus

Koodi serveris käitamise kaudu vähendavad Server Actions teie rakenduse rünnakupinda. Tundlikud andmed ja äriloogika hoitakse kliendi eest eemal, takistades pahatahtlikel kasutajatel neid rikkuda. Näiteks andmebaasi mandaate või API võtmeid ei avaldata kunagi kliendipoolses koodis. Kogu andmebaasi interaktsioon toimub serveris, vähendades SQL-i süstimise või volitamata juurdepääsu ohtu.

Parem jõudlus

Server Actions võib parandada jõudlust, vähendades JavaScripti hulka, mida on vaja kliendis alla laadida ja käivitada. See on eriti kasulik kasutajatele, kellel on madala võimsusega seadmed või aeglane internetiühendus. Andmetöötlus toimub serveris ja kliendile saadetakse ainult vajalikud UI värskendused, mille tulemuseks on kiirem lehe laadimine ja sujuvam kasutuskogemus.

Optimistlikud värskendused

Server Actions integreeruvad sujuvalt Reacti Suspense ja Transitions'iga, võimaldades optimistlikke värskendusi. Optimistlikud värskendused võimaldavad teil UI-d kohe värskendada, isegi enne, kui server on toimingu kinnitanud. See tagab reageerivama ja kaasahaaravama kasutuskogemuse, kuna kasutajad ei pea ootama serveri vastust, enne kui nad näevad oma toimingute tulemusi. E-kaubanduses saab ostukorvi lisatava elemendi kohe kuvada, samal ajal kui server kinnitab taustal lisamist.

Progressiivne täiustamine

Server Actions toetavad progressiivset täiustamist, mis tähendab, et teie rakendus võib endiselt toimida, isegi kui JavaScript on keelatud või seda ei õnnestu laadida. Kui JavaScript on keelatud, esitatakse vormid traditsiooniliste HTML-vormidena ja server käsitleb esitamist ja suunab kasutaja uuele lehele. See tagab, et teie rakendus jääb kättesaadavaks kõigile kasutajatele, olenemata nende brauseri konfiguratsioonist või võrgutingimustest. See on eriti oluline juurdepääsetavuse ja SEO jaoks.

Kuidas kasutada React Server Actions'it

React Server Actions'i kasutamiseks peate kasutama raamistikku, mis neid toetab, näiteks Next.js. Siin on samm-sammult juhend:

1. Defineeri Server Action

Looge asünkroonse funktsioon, mis töötab serveris. See funktsioon peaks käsitlema loogikat, mida soovite serveris käivitada, näiteks andmebaasi värskendamine või API kutsumine. Märgistage funktsioon direktiiviga `"use server"` ülaosas, et näidata, et see on Server Action. See direktiiv ütleb Reacti kompilaatorile, et funktsiooni tuleb käsitleda serveripoolse funktsioonina ning käsitseda automaatselt andmete serialiseerimist ja deserialiseerimist kliendi ja serveri vahel.

            // app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // Clear the route cache
    return { message: 'Message saved successfully!' };
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}
            

              
                Copy
              
            
          

Selgitus:

• `'use server'` direktiiv märgib selle funktsiooni Server Actionina.
• `revalidatePath('/')` tühjendab marsruudi vahemälu, tagades, et värskendatud andmed tuuakse järgmisel päringul. See on andmete järjepidevuse säilitamiseks ülioluline.
• `saveMessage(message)` on teie tegeliku andmebaasi interaktsiooniloogika kohatäide. See eeldab, et teil on mujal määratletud funktsioon `saveMessage` sõnumi andmebaasi salvestamise käsitlemiseks.
• Funktsioon tagastab olekuobjekti, mida saab kasutada kasutajale tagasiside kuvamiseks.

2. Impordi ja kasuta Server Action'it oma komponendis

Importige Server Action oma Reacti komponenti ja kasutage seda vormielemendi `action` rekvisiidina. `useFormState` konksu saab kasutada vormi oleku haldamiseks ja kasutajale tagasiside kuvamiseks.

            // app/page.jsx
'use client';

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      Message:
      
      Submit
      {state?.message && 
{state.message}
}
    
  );
}
            

              
                Copy
              
            
          

Selgitus:

• `'use client'` direktiiv määrab, et see on kliendikomponent (kuna see kasutab `useFormState`).
• `useFormState(createMessage, {message: ''})` initsialiseerib vormi oleku `createMessage` Server Actioniga. Teine argument on algolek.
• `form` elemendi rekvisiit `action` on seatud `formAction` väärtuseks, mille tagastab `useFormState`.
• Muutuja `state` sisaldab Server Actioni tagastusväärtust, mida saab kasutada kasutajale tagasiside kuvamiseks.

3. Käsitle vormiandmeid

Server Actioni sees pääsete vormiandmetele juurde `FormData` API abil. See API pakub mugava viisi vormiväljade väärtustele juurdepääsuks.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}
            

              
                Copy
              
            
          

4. Käsitle vigu

Kasutage `try...catch` plokke, et käsitleda vigu, mis võivad Server Actioni käivitamise ajal tekkida. Tagastage olekuobjektis veateade, et seda kasutajale kuvada.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}
            

              
                Copy
              
            
          

5. Revalidateeri andmed

Pärast seda, kui Server Action on andmeid edukalt muutnud, peate võib-olla andmete vahemälu uuesti valideerima, et tagada, et UI kajastab uusimaid muudatusi. Kasutage funktsioone `revalidatePath` või `revalidateTag` teegist `next/cache`, et uuesti valideerida konkreetseid radu või silte.

            'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Clear the route cache
  // ...
}
            

              
                Copy
              
            
          

Täpsem kasutamine

Andmete muutmine

Server Actions sobivad eriti hästi andmete muutmiseks, näiteks andmebaaside või väliste API-de värskendamiseks. Saate kasutada Server Actions'it keerukate andmete muutmiste käsitlemiseks, mis nõuavad serveripoolset loogikat, näiteks andmete valideerimine, arvutuste tegemine või suhtlemine mitme andmeallikaga. Mõelge stsenaariumile, kus peate värskendama kasutaja profiili ja saatma kinnitusmeili. Server Action saab käsitleda nii andmebaasi värskendamist kui ka meili saatmise protsessi ühes aatomioperatsioonis.

Autentimine ja autoriseerimine

Server Actions'it saab kasutada autentimise ja autoriseerimise käsitlemiseks. Autentimise ja autoriseerimise kontrollide tegemisega serveris saate tagada, et ainult volitatud kasutajatel on juurdepääs tundlikele andmetele ja funktsioonidele. Saate kasutada Server Actions'it kasutajate sisselogimiste, registreerimiste ja parooli lähtestamiste käsitlemiseks. Näiteks saab Server Action kontrollida kasutaja mandaate andmebaasi vastu ja tagastada tokeni, mida saab kasutada järgnevate päringute autentimiseks.

Edge funktsioonid

Server Actions'it saab juurutada Edge funktsioonidena, mis töötavad teie kasutajatele lähedasel globaalses serverite võrgus. See võib oluliselt vähendada latentsust ja parandada jõudlust, eriti geograafiliselt hajutatud asukohtades asuvate kasutajate jaoks. Edge funktsioonid sobivad ideaalselt Server Actions'i käsitlemiseks, mis nõuavad madalat latentsust, näiteks reaalajas andmete värskendused või isikupärastatud sisu edastamine. Next.js pakub sisseehitatud tuge Server Actions'i juurutamiseks Edge funktsioonidena.

Voogedastus

Server Actions toetavad voogedastust, mis võimaldab teil saata andmeid kliendile tükkidena, kui need kättesaadavaks saavad. See võib parandada teie rakenduse tajutavat jõudlust, eriti Server Actions'i puhul, mille käivitamine võtab kaua aega. Voogedastus on eriti kasulik suurte andmekogumite või keerukate arvutuste käsitlemiseks. Näiteks saate otsingutulemused kliendile voogesitada, kui need andmebaasist kätte saadakse, pakkudes reageerivamat kasutuskogemust.

Parimad praktikad

Siin on mõned parimad praktikad, mida React Server Actions'i kasutamisel järgida:

• Hoidke Server Actions väikesed ja keskendunud: Iga Server Action peaks täitma ühte selgelt määratletud ülesannet. See muudab teie koodi lihtsamini mõistetavaks, testitavaks ja hooldatavaks.
• Kasutage kirjeldavaid nimesid: Valige nimed, mis selgelt näitavad Server Actioni eesmärki. Näiteks `createComment` või `updateUserProfile` on paremad kui üldised nimed nagu `processData`.
• Valideerige andmed serveris: Valideerige alati andmed serveris, et vältida pahatahtlikel kasutajatel oma rakendusse kehtetute andmete sisestamist. See hõlmab andmetüüpide, vormingute ja vahemike valideerimist.
• Käsitlege vigu graatsiliselt: Kasutage `try...catch` plokke vigade käsitlemiseks ja kasutajale informatiivsete veateadete esitamiseks. Vältige tundliku veateabe avaldamist kliendile.
• Kasutage optimistlikke värskendusi: Pakkuge reageerivamat kasutuskogemust, värskendades UI-d kohe, isegi enne, kui server on toimingu kinnitanud.
• Valideerige andmed vajadusel uuesti: Tagage, et UI kajastab uusimaid muudatusi, valideerides andmete vahemälu uuesti pärast seda, kui Server Action on andmeid muutnud.

Reaalse maailma näited

Vaatleme mõningaid reaalseid näiteid selle kohta, kuidas React Server Actions'it saab kasutada erinevat tüüpi rakendustes:

E-kaubanduse rakendus

• Elemendi lisamine ostukorvi: Server Action saab käsitleda elemendi lisamist kasutaja ostukorvi ja ostukorvi kogusumma värskendamist andmebaasis. Optimistlikke värskendusi saab kasutada elemendi koheseks kuvamiseks ostukorvis.
• Makse töötlemine: Server Action saab käsitleda makse töötlemist kolmanda osapoole maksevärava abil. Server Action saab ka andmebaasis tellimuse olekut värskendada ja kasutajale kinnitusmeili saata.
• Tooteülevaate esitamine: Server Action saab käsitleda tooteülevaate esitamist ja selle andmebaasi salvestamist. Server Action saab ka arvutada toote keskmise hinnangu ja värskendada toote üksikasjade lehte.

Sotsiaalmeedia rakendus

• Uue säutsu postitamine: Server Action saab käsitleda uue säutsu postitamist ja selle andmebaasi salvestamist. Server Action saab ka värskendada kasutaja ajajoont ja teavitada nende jälgijaid.
• Postituse meeldimine: Server Action saab käsitleda postituse meeldimist ja meeldimiste arvu värskendamist andmebaasis. Optimistlikke värskendusi saab kasutada värskendatud meeldimiste arvu koheseks kuvamiseks.
• Kasutaja jälgimine: Server Action saab käsitleda kasutaja jälgimist ja jälgijate ja jälgitavate arvude värskendamist andmebaasis.

Sisuhaldussüsteem (CMS)

• Uue blogipostituse loomine: Server Action saab käsitleda uue blogipostituse loomist ja selle andmebaasi salvestamist. Server Action saab ka postituse jaoks luua slug'i ja värskendada saidikaarti.
• Lehe värskendamine: Server Action saab käsitleda lehe värskendamist ja selle andmebaasi salvestamist. Server Action saab ka uuesti valideerida lehe vahemälu, et tagada värskendatud sisu kuvamine kasutajatele.
• Muudatuse avaldamine: Server Action saab käsitleda muudatuse avaldamist andmebaasis ja kõigi tellijate teavitamist.

Rahvusvahelistamise kaalutlused

Ülemaailmsele publikule rakenduste arendamisel on oluline arvestada rahvusvahelistamise (i18n) ja lokaliseerimise (l10n). Siin on mõned kaalutlused React Server Actions'i kasutamisel rahvusvahelistatud rakendustes:

• Erinevate kuupäeva- ja kellaaegavormingute käsitlemine: Kasutage `Intl` API-t kuupäevade ja kellaaegade vormindamiseks vastavalt kasutaja lokaadile.
• Erinevate numbrivormingute käsitlemine: Kasutage `Intl` API-t numbrite vormindamiseks vastavalt kasutaja lokaadile.
• Erinevate valuutade käsitlemine: Kasutage `Intl` API-t valuutade vormindamiseks vastavalt kasutaja lokaadile.
• Veateadete tõlkimine: Tõlkige veateated kasutaja keelde.
• Paremalt vasakule (RTL) keelte toetamine: Veenduge, et teie rakendus toetab RTL-keeli, näiteks araabia ja heebrea keelt.

Näiteks kuupäevasisestust nõudva vormi töötlemisel saab Server Action kasutada `Intl.DateTimeFormat` API-t kuupäeva parsimiseks vastavalt kasutaja lokaadile, tagades, et kuupäeva tõlgendatakse õigesti olenemata kasutaja piirkondlikest seadetest.

Järeldus

React Server Actions on võimas tööriist serveripoolse vormitöötluse ja andmete muutmise lihtsustamiseks Reacti rakendustes. Võimaldades teil kirjutada serveripoolset koodi otse oma Reacti komponentides, vähendavad Server Actions boilerplaadi koodi, suurendavad turvalisust, parandavad jõudlust ja võimaldavad optimistlikke värskendusi. Järgides selles juhendis toodud parimaid praktikaid, saate kasutada Server Actions'it, et ehitada jõulisemaid, skaleeritavamaid ja hooldatavamaid Reacti rakendusi. Kuna React areneb pidevalt, mängivad Server Actions kahtlemata üha olulisemat rolli veebiarenduse tulevikus.